<template>
  <div class="xgl">
    <div class="header">
      <el-row :gutter="20">
        <el-col :span="6"><el-button icon="el-icon-plus" @click="dialogVisible=true">创建</el-button></el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">&nbsp;</div>
        </el-col>
        <el-col :span="8">
          <div style="display: flex;">
            <el-input v-model="params.name" placeholder="系名"></el-input>
            <el-button style="margin-left: 20px" type="primary" icon="el-icon-search"
            @click="search">搜索</el-button>

          </div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content bg-purple">&nbsp;</div>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-pagination :current-page="page" @current-change="handleCurrentChange" style="text-align: center;" background layout="prev, pager, next" :total="total">
      </el-pagination>
    </div>
    <el-table :data="tableData" style="width: 100%" v-loading="loading">
      <el-table-column prop="id" label="系id" width="180">
      </el-table-column>
      <el-table-column prop="name" label="系名称" width="180">
      </el-table-column>
      <el-table-column prop="majorCount" label="专业数">
      </el-table-column>
      <el-table-column prop="teacherCount" label="教师数">
      </el-table-column>
      
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger"  @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
              </el-table>
              <!-- 添加 -->
       <el-dialog title="添加"
       :visible.sync="dialogVisible" :close-on-click-modal="false" width="30%" >
        <add @close="dialogVisible=false" :key="dialogVisible" @done="handleDone"></add>
          </el-dialog>

          <!-- 编辑 -->
           <el-dialog title="提示" :visible.sync="dialogEdit"
           width="30%">
          <edit :id="id" :key="id" ref="edit"></edit>
          <span slot="footer" class="dialog-footer">
          <el-button @click="dialogEdit = false">取 消</el-button>
          <el-button type="primary" @click="edited">确 定</el-button>
          </span>
          </el-dialog>
            </div>
          </template>

<script>
import { xglPageCount, xglPage,xglDelete } from '@/api/xgl';
import add from "./component/add.vue"
import edit from "./component/edit.vue"
export default {
  components:{
    add:add,
    edit:edit
  },
  data() {
    return {
      params:{
        name: "",
      },
      //表格数据
      tableData: [],
      page:1,
      total: 0,
      //是否需要加载
      loading:false,
      //对话框
      dialogVisible:false,
      //编辑对话框
      dialogEdit:false,
      id:""
    }
  },
  methods: {
    async getList() {
      this.loading=true
      let ret1 = await xglPageCount(this.params);
      this.total = ret1.data * 10;
 
        let ret2 = await xglPage(this.params, this.page);
        this.tableData = ret2.data;
      this.loading=false
    },
    search(){
      console.log(this.params.name);
      this.page=1;
      this.getList()

    },
    //页数切换
    handleCurrentChange(page){
      console.log(page);
      this.page=page;
      this.getList()
    },
    //添加成功
    handleDone(){
      this.dialogVisible=false;
      this.getList()
    },
    //编辑功能
    handleEdit(row){
      console.log(row);
      this.id=row.id
      this.dialogEdit=true
    },
    edited(){
      this.$refs["edit"].onSubmit(res=>{
        if(res.code===0){
          this.$message({
            message:"保存成功",
            type:"success",
            duration:1500
          })
          this.getList()
          this.dialogEdit=false
        }
      })
    },
    //删除
    handleDelete(row){
      console.log(row.id);
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          xglDelete(row.id).then(res=>{
            console.log();
            if(res.code===0){
              this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getList()
            }
          })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      
    }
  },
  mounted(){
    this.getList();
  }
}
</script>
